<template>
  <el-container class="header-wrapper">
    <el-aside class="logo">
      <el-row>
        <el-col :span="2">
          <span class="col">{{ $t('ems.graphicalRepresentation') }}:</span>
        </el-col>
        <el-col class="col" :span="4">
          <div class="cicle"></div>
          {{ $t('ems.powerOn') }}
        </el-col>
        <el-col class="col" :span="4">
          <div class="cicle2"></div>
          {{ $t('ems.production') }}
        </el-col>
        <el-col class="col" :span="4">
          <div class="cicle3"></div>
          {{ $t('ems.shutDown') }}
        </el-col>
        <el-col class="col" :span="4">
          <div class="cicle4"></div>
          {{ $t('ems.breakdown') }}
        </el-col>
        <el-col class="col" :span="4">
          <div class="cicle5"></div>
          {{ $t('ems.operation') }}
        </el-col>
      </el-row>
      <el-row>
        <el-col class="col" :span="8">
          <span style="font-size: 18px;font-weight: 600">d：</span>{{$t('ems.day')}}
        </el-col>
        <el-col class="col" :span="8">
          <span style="font-size: 18px;font-weight: 600">h：</span>{{$t('ems.hours')}}
        </el-col>
        <el-col class="col" :span="8">
          <span style="font-size: 18px;font-weight: 600">m：</span>{{$t('ems.minutes')}}
        </el-col>
      </el-row>
    </el-aside>
    <div class="content">
      <h1 class="title "><span>{{ $t('ems.afRealTimeLine') }}</span></h1>
    </div>
    <div class="time">
      <p class="times">{{ data.time }}</p>
    </div>
  </el-container>
</template>

<script setup>
import config from '@/config/index'
import { reactive, ref, watch, onMounted, defineProps } from 'vue'
import { CountTo } from 'vue3-count-to'
import iconFont from '@/components/IconFont/iconFont'

const data = reactive({
  videoUrl: config.ossUrl + '/afl-data-screen/images/job.mp4',
  icon1: config.ossUrl + '/afl-data-screen/images/icon-screen.png',
  time: ''
})
onMounted(() => {
  setInterval(async () => {
    await times()
  }, 100)
  // times()
})
const times = () => {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  const day = date.getDate()
  const hours = date.getHours()
  const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  // const milliscs = date.getMilliseconds()
  data.time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ': ' + seconds
}
</script>

<style scoped lang="scss">
.header-wrapper {
  height: 100%;
  width: 100%;
  background-color: #fff;
  background: url('@/assets/images/53titlebg.png') no-repeat top center;
  background-size: 80%;
  text-align: center;

  .row-wrapper {
    display: flex;
    flex-direction: row;
  }

  .logo {
    width: 30%;
    overflow: hidden;
    position: relative;
    color: #ffffff;
  }

  .content {
    flex: 1;
  }

  .time {
    width: 30%;
  }
}

.col {
  font-size: 16px;
  line-height: 50px;
  position: relative;
  text-align: left;
  padding-left: 10%;
}

.cicle {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/blue.png') no-repeat center;
  animation: rotate 5s infinite linear;
  background-size: 100%;
  position: absolute;
  left: 20px;
  top: 10px;
}

.cicle2 {
  background: url('@/assets/images/green.png') no-repeat center;
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background-size: 100%;
  position: absolute;
  left: 20px;
  top: 10px;
  animation: rotate 5s infinite linear;
}

.cicle3 {
  background: url('@/assets/images/orange.png') no-repeat center;
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background-size: 100%;
  position: absolute;
  left: 20px;
  top: 10px;
  animation: rotate 5s infinite linear;
}

.cicle4 {
  background: url('@/assets/images/red.png') no-repeat center;
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background-size: 100%;
  position: absolute;
  left: 20px;
  top: 10px;
  animation: rotate 5s infinite linear;
}

.cicle5 {
  background: url('@/assets/images/green2.png') no-repeat center;
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background-size: 100%;
  position: absolute;
  left: 20px;
  top: 10px;
  animation: rotate 5s infinite linear;
}

.title {
  font-size: 50px;
  line-height: 200%;
  width: 100%;
  text-align: center;
  height: 50%;
  margin: auto;
  display: table;
  font-weight: 500;
  background-image: -webkit-linear-gradient(bottom, #86919e, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.times {
  font-weight: normal;
  font-size: 28px;
  text-transform: capitalize;
  text-align: right;
  line-height: 50px;
  //color: rgb(138, 167, 208);
  color: white;
  letter-spacing: 2px;
  text-indent: 2px;
  padding: 0 20px 0 0;
}

@keyframes rotate {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
